<template>
  <div id="pop">
  	<div class="module-dialog-layer" style="display: block;"></div>
    <div class="module-dialog clear module-dialog-address module-dialog-show">
      <div class="dialog-panel">
        <div class="topbar">
          <div class="dialog-tit clear">
            <h4 class="js-dialog-title">管理收货地址</h4>
          </div>
          <span class="dialog-close" @click="closePop">x</span>
        </div>
        <div class="dialog-con js-dialog-container">
          <div class="animate-layer">
            <div class="dialog-inner js-address-add">
              <div class="save-address-box">
                <div class="address-form">
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <input type="text" class="js-verify" placeholder="收货人姓名" v-model="receive.name">
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row">
                    <div class="form-item-v3" :class="{'form-invalid-item':phoneError}">
                      <input type="text" class="js-verify" placeholder="手机号" v-model="receive.phone" @blur="inspectPhone">
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div class="form-item-v3 area-code-w fn-left form-valid-item">
                      <input type="text" class="js-verify js-address-area-code" placeholder="区号（可选）" v-model="receive.areaCode">
                      <div class="verify-error"></div>
                    </div>
                    <div class="form-item-v3 telephone-w fn-right form-valid-item">
                      <input type="text" class="js-verify js-address-telephone" placeholder="固定电话（可选）" v-model="receive.landLine">
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div class="form-item-v3 select-item province-wrapper">
                      <select name="province_code" class="province select-province js-form-province js-verify" v-model="receive.provinceId">
                        <option value="0">请选择省份</option>
                        <option :value="province.area_id" v-for="province,index in addList">{{province.area_name}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div class="form-item-v3 select-item city-wrapper fn-left form-focus-item">
                      <select class="city select-city js-form-city js-verify" v-model="receive.cityId">
                        <option value="0">请选择城市</option>
                        <option :value="city.area_id" v-for="city,index in cityList">{{city.area_name}}</option>
                      </select>
                    </div>
                    <div class="form-item-v3 select-item district-wrapper fn-right form-focus-item">
                      <select class="city select-city js-form-city js-verify" v-model="receive.countyId">
                        <option value="0">请选择区县</option>
                        <option :value="county.area_id" v-for="county,index in couontyList">{{county.area_name}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <input type="text" class="js-verify" placeholder="详细地址，如街道名称，楼层，门牌号码等" v-model="receive.add">
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row fn-clear">
                    <input type="checkbox" class="hide" value="1">
                    <span class="blue-checkbox" :class="{'blue-checkbox-on':receive.default}" @click="chooseDefault"></span>设为默认
                  </div>
                  <div class="dialog-blue-btn big-main-btn js-verify-address" :class="{'disabled-btn':!right}" @click="submitReceiveHandle">
                    <a>保存</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import addList from '@/lib/addList'
  export default {
    data () {
      return {
        addList,
        receive: {
          "name": "",
          "phone": "",
          "areaCode": "",
          "landLine": "",
          "provinceId": 0,
          "province": "",
          "cityId": 0,
          "city": "",
          "countyId": 0,
          "county": "",
          "add": "",
          "default": false,
          "checked": false
        },
        cityList: [],
        couontyList: [],
        right: false,
        phoneError: false
      }
    },
    created () {
      if(this.oldReceive){
        let province = this.addList.filter((province) => {
          return province.area_id == this.oldReceive.provinceId
        })[0]
        this.receive.province = province.area_name
        this.cityList = province.city_list
        let city = this.cityList.filter((city) => {
          return city.area_id == this.oldReceive.cityId
        })[0]
        this.receive.city = city.area_name
        this.couontyList = city.county_list
        this.receive = JSON.parse(JSON.stringify(this.oldReceive))
      }
    },
    props: {
      oldReceive: {
        type: Object
      },
      receiveIndex: {
        type: Number
      }
    },
    watch: {
      ["receive.provinceId"] () {
        if (this.receive.provinceId!=0) {
          let province = this.addList.filter((province) => {
            return province.area_id == this.receive.provinceId
          })[0]
          this.receive.province = province.area_name
          this.cityList = province.city_list
        } else {
          this.cityList = []
          this.receive.province = ""
          this.receive.cityId = 0
        }
        this.inspectReceive()
      },
      ["receive.cityId"] () {
        if (this.receive.cityId!=0) {
          let city = this.cityList.filter((city) => {
            return city.area_id == this.receive.cityId
          })[0]
          this.receive.city = city.area_name
          this.couontyList = city.county_list
        } else {
          this.couontyList = []
          this.receive.city = ""
          this.receive.countyId = 0
        }
        this.inspectReceive()
      },
      ["receive.countyId"] () {
        if (this.receive.countyId!=0) {
          let county = this.couontyList.filter((county) => {
            return county.area_id == this.receive.countyId
          })[0]
          this.receive.county = county.area_name
          console.log(this.receive)
        } else {
          this.receive.county = ""
        }
        this.inspectReceive()
      },
      ["receive.name"] () {
        this.inspectReceive()
      },
      ["receive.phone"] () {
        this.inspectReceive()
      },
      ["receive.add"] () {
        this.inspectReceive()
      }
    },
    computed: {
      receiveInfo () {
        return this.$store.state.receiveInfo
      }
    },
    methods: {
      closePop ()　{
        this.$emit('close')
      },
      chooseDefault () {
        this.receive.default = !this.receive.default
        this.receive.checked = !this.receive.checked
      },
      inspectPhone () {
        if (this.receive.phone.length!=11) {
          this.phoneError = true
        } else {
          this.phoneError = false
        }
      },
      inspectReceive () {
        if(this.receive.name&&this.receive.phone.length==11&&this.receive.province&&this.receive.city&&this.receive.county&&this.receive.add){
          this.right = true
        }else{
          this.right = false
        }
      },
      submitReceiveHandle () {
        this.$store.commit('submitReceive',[this.receive,this.receiveIndex])
        this.$emit('close')
      }
    }
  }
</script>

<style>
#pop .module-dialog-layer{
    display: none;
    position: fixed;
    _position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .6;
}
#pop .module-dialog .dialog-panel, .module-dialog:after{
    display: inline-block;
    vertical-align: middle;     
}
#pop .module-dialog:after{
    content: '';
    height: 100%;
    margin-left: -.25em;
}
#pop .module-dialog{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    text-align: center;
    opacity: 0;
    transition: opacity .2s ease-in;
}
#pop .module-dialog-show{
    opacity: 1;
}
#pop .module-dialog .dialog-panel{
    position: relative;
    width: 450px;
    min-width: 200px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset, 1px 0 3px rgba(0,0,0,.1);
    text-align: left;
    height: 592px;  
}
#pop .module-dialog .topbar{
    overflow: hidden;
    width: 100%;
    height: 60px;
    background: linear-gradient(#FFF,#F5F5F5);
    border-bottom: 1px solid #DCDCDC;
    border-radius: 10px 10px 0 0;
    box-shadow: 2px 0 5px rgba(0,0,0,.1);
}
#pop .module-dialog-address .topbar{
    position: relative;
    z-index: 10;
}
#pop .module-dialog .dialog-tit{
    height: 60px;
    padding: 0 15px;
    line-height: 60px;
}
#pop .module-dialog .dialog-tit h4{
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #666;
}
#pop .module-dialog .dialog-close{
    overflow: hidden;
    display: block;
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 20;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    color: #000;
    opacity: .2;
    cursor: pointer;
    transition: all .3s linear;
}
#pop .module-dialog .dialog-close:hover{
    opacity: .3;
}
.module-dialog .animate-layer{
    position: relative;
}
#pop .module-dialog-address .save-address-box{
    width: 450px;
    padding-top: 29px;
}
#pop .address-form{
    width: 370px;
    margin: 0 auto;
}
.account-address .address-form{
    padding: 30px;
    margin: 0;
}
#pop .module-form-row{
    position: relative;
    padding-bottom: 10px;
    margin: 0 auto;
}
#pop .address-form .module-form-row{
    padding-bottom: 15px;
}
#pop .module-form-row .form-item-v3{
    position: relative;
    height: 46px;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 6px;
    box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
    line-height: 46px;
    font-size: 18px;
    opacity: .618;
    transition: opacity .3s ease;
}
#pop .module-form-row .form-item-v3 i{
    position: absolute;
    left: 15px;
    top: 0;
    font-size: 16px;
    color: #BEBEBE;
}
#pop .module-form-row .form-item-v3 input{
    padding: 0 15px;
    background-color: transparent;
    border: none;
    font-size: 16px;
}
#pop .address-form .form-item-v3 input{
  width: 330px;
}
#pop .address-form .form-item-v3:after{
  position: absolute;
  right: 13px;
  top: 50%;
  z-index: 11;
  height: 26px;
  padding: 0 10px;
  margin-top: -13px;
  background: #D16D62;
  border-radius: 4px;
  line-height: 26px;
  font-size: 12px;
  color: #FFF;
  visibility: hidden;
  content: "手机号格式错误";
  opacity: 0;
  transition: all .3s ease-in;
}
#pop .module-form-row .form-invalid-item{
  opacity: 1;
  border: 1px solid #D16D62;
}
#pop .module-form-row .form-invalid-item:after{
  visibility: visible;
  opacity: 1;
}
#pop .address-form .area-code-w{
    width: 118px;
}
#pop .address-form .telephone-w{
    width: 238px;
}
#pop .module-form-row div.select-item{
    width: auto;
    height: auto;
    margin: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    opacity: 1;
}
#pop .module-form-row .form-item-v3 select{
    margin: 0 0 0 15px;
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: #333;
}
#pop .address-form .select-province{
    width: 370px;
}
#pop .form-focus-item{
    z-index: 1;
    opacity: 1;
    border: 1px solid #6B93F2;
}
#pop .module-form-row div.select-item{
    width: auto;
    height: auto;
    margin: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    opacity: 1;
}
#pop .module-form-row .form-item-v3 select{
    height: 48px;
    padding: 0 15px;
    margin: 0;
    background: -webkit-linear-gradient(top,#FAFAFA,#F5F5F5);
    background: linear-gradient(#FAFAFA,#F5F5F5);
    border: 1px solid #CCC;
    border-radius: 6px;
    box-shadow: 2px 0 0 rgba(255,255,255,.4) inset, 1px 0 0 rgba(255,255,255,.3);
    line-height: 48px;
    text-indent: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
#pop .address-form .select-city, #pop .address-form .select-district{
    width: 180px;
}
#pop .blue-checkbox, #pop .blue-checkbox-disable, #pop .blue-checkbox-on{
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    background: url(../assets/img/checkbox-bg.png) no-repeat;
    cursor: pointer;
}
#pop .address-form .blue-checkbox{
    top: 0;
    float: left;
    margin-right: 5px;
}
#pop .blue-checkbox-on, .choose-checkbox-on .blue-checkbox{
  background: url(../assets/img/checkbox-bg.png) 0 -20px no-repeat;
}
#pop .dialog-blue-btn{
    padding: 1px;
    background: #6383C6;
    background: linear-gradient(#6383C6,#4262AF);
    border-radius: 6px;
    text-align: center;
    color: #FFF;
}
#pop .disabled-btn{
    opacity: .4;
}
#pop .disabled-btn, .disabled-btn a{
    cursor: not-allowed;
    -webkit-transition: none;
    transition: none;
    pointer-events: none;
}
#pop .dialog-blue-btn a{
    display: block;
    padding: 2px 0;
    background: #5F7ED7;
    background: linear-gradient(#6F97E5,#527ED9);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px #7EA1E8;
    text-shadow: 0 -1px 0 #4F70B3;
    color: #FFF;
}
#pop .big-main-btn a{
    height: 42px;
    line-height: 42px;
    font-size: 18px;
}
</style>